<template>
	<view class="home">
		<!-- 搜索 -->
		<view class="search">
			<!-- 地区选择 -->
			<view class="address" @click="openAddressSelect()">
				<text class="address_content">{{ citySelect }}</text>
				<!-- <view class="address_icon"></view> -->
				<image class="address_icon" src="../../static/images/addressSelect.png"></image>
				<addressSelete v-if="showUniAddressSelector" :areaInfoSelected="areaInfoObj" selectAreaLevelLimit="3"
					@cancel="handleCancel" @confirm="handleConfirm"></addressSelete>
			</view>
			<!-- 搜索框 -->
			<view class="search-bar">
				<view class="search-bar-box">
					<input type="text" :value="pageVo.search" placeholder="请输入搜索内容" class="search-text" @input="onInput"/>
					<button class="search-btn" @click="toSearch">搜索</button>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item, index in advertisingVos">
			
					<view class="swiper-item">
						<image style="width: 100%;" :src="item.advertisingImg" @click="advertisingJump(item.advertisingLink)"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类滚动条 -->
		<scroll-view scroll-x class="navscroll">
			<view 
			class="item" v-for="item in navArr" :key="item.categoryId"
			@click="clickNav(item.categoryId)"
			>{{ item.categoryName }}
			</view>			
		</scroll-view>
		<!-- 兼职信息 -->
		<view>
			<view class="row" v-for="item, index in parttimeVoList" :key="index">
				<parttimebox :item="item" @click.native="goDetail(item.parttimeId)"></parttimebox>
			</view>
		</view>
	</view>
</template>

<script>
	import addressSelete from "@/components/Luke-UniappAddressSelector/components/UniAddressSelector.vue"
	import parttimebox from "@/components/parttimebox/parttimebox.vue"
	
	import index from "@/static/js/api/index.js"

	export default {
		name: "index",
		components: {
			addressSelete,
			parttimebox
		},
		data() {
			return {
				// 轮播
				advertisingVos: [
					{
						advertisingImg: "../../static/images/headbackground.png",
						advertisingLink: "http://baidu.com/"
					},
					{
						advertisingImg: "../../static/images/headbackground.png",
						advertisingLink: "http://baidu.com/"
					},
					{
						advertisingImg: "../../static/images/headbackground.png",
						advertisingLink: "http://baidu.com/"
					}
				],
				title: 'Hello',
				showUniAddressSelector: false,
				areaInfoObj: {

				},
				citySelect: "成都",
				navArr: ["酒店服务", "游戏代打", "传单", "跑腿", "打印", "上课"],
				

				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				
				
				// 
				pageVo: {
					address: "成都",
					search: "",
					categoryId: 1
				},
				
				parttimeVoList: [],
				// 分类
				
				
			}
		},

		onLoad() {
			this.getAllCategory();
			this.getAllParttime(this.pageVo);
			this.getAllAdvertising();
		},
		methods: {
			// 查询赋值兼职分类
			getAllCategory() {
				index.getAllCategory().then((res) => {
					this.navArr = res.data;	
				});
			},
			
			// 查询赋值兼职信息
			getAllParttime(data) {
				index.getAllParttime(data).then((res) => {
					this.parttimeVoList = res.data;
				});
			},
			
			// 查询赋值广告信息
			getAllAdvertising() {
				index.getAllAdvertising().then((res) => {
					this.advertisingVos = res.data
				})
			},
			
			// 点击分类查询
			clickNav(categoryId) {
				console.log("jfdh")
				console.log(categoryId)
				this.pageVo.categoryId = categoryId
				this.getAllParttime(this.pageVo)
			},
			
			onInput(e) {
				console.log(e)
				this.pageVo.search = e.detail.value;
			},
			// 搜索查询
			toSearch() {
				this.getAllParttime(this.pageVo)
			},
		
			openAddressSelect() {
				this.showUniAddressSelector = true;
			},
			handleCancel() {
				this.showUniAddressSelector = false;
			},
			
			// 根据地址查询
			handleConfirm(areaInfoObj) {
				this.showUniAddressSelector = false;
				this.areaInfoObj = areaInfoObj;
				this.citySelect = this.areaInfoObj.cityObj.name;
				this.citySelect = this.citySelect.substr(0, 2);
				
				this.pageVo.address = this.citySelect
				this.getAllParttime(this.pageVo)
			},
			advertisingJump(url) {
				uni.navigateTo({
					url: '/pages/common/webview/webview?url=' + url
				})
			},
			goDetail(parttimeId) {
				uni.navigateTo({
					url: '/pages/parttimeDetial/parttimeDetial?parttimeId=' + parttimeId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 搜索样式
	.search {
		display: flex;
		align-items: center; // 上下居中
		justify-content: space-between;
		margin-top: 1%;

		.address {
			height: 70rpx;
			width: 150rpx;
			background-color: #02BFBF;

			display: flex;
			align-items: center; // 上下居中
			justify-content: flex-end; // 右对齐

			.address_content {
				color: white;
			}

			.address_icon {
				height: 50rpx;
				width: 50rpx;
			}
		}

		.search-bar {
			height: 70rpx;

			.search-bar-box {
				display: flex;
				margin: 0 auto;
				width: 600rpx;
				height: 70rpx;
				border: 5rpx solid #02BFBF;
				border-radius: 50rpx;

				.search-span {
					width: 100rpx;
					height: 56rpx;
					margin-top: 6rpx;
					margin-left: 30rpx;
				}

				.search-text {
					width: 100%;
					margin-top: 10rpx;
					margin-left: 20rpx;
					color: #7f7f81;
				}

				.search-btn {
					background-color: #02BFBF;
					/* Green */
					color: white;
					text-align: center;
					display: inline-block;
					font-size: 35rpx;
					width: 240rpx;
					height: 70rpx;
					line-height: 65rpx;
					border-radius: 30rpx;
					letter-spacing: 3rpx;
				}

			}

		}
	}

	// 轮播样式
	.uni-margin-wrap {
		margin-top: 1%;
		display: block;
		width: 690rpx;
		width: 100%;
		.swiper {
			height: 300rpx;
			.swiper-item {
				display: block;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
			}
		}
	}

	// 分类样式
	.navscroll {
		height: 100rpx;
		background: #F8F8F8;
		white-space: nowrap;
		left: 0;
		z-index: 10;

		/deep/ ::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}

		.item {
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
			color: #333;
			&.active {
				color: #31C27C;
			}
		}
	}
</style>
